<template>
  <div class="lotteryCharts">
    <div class="lotChartsBack">
      <!--广东11选五-->
      <div class="lotGD11"
           v-if="_Format.formatCode($route.query.code).isNo || _Format.formatCode($route.query.code).add || _Format.formatCode($route.query.code).happy8 || _Format.formatCode($route.query.code).shares || _Format.formatCode($route.query.code).zodiac || _Format.formatCode($route.query.code).pk10|| _Format.formatCode($route.query.code).baccarat|| _Format.formatCode($route.query.code).bigWheel">
        <div class="lotGDDiv11">
          <div class="lotGDChartsTitle chartTabTitle">
            <ul>
              <li>{{lotChartsTitleData.date}}</li>
              <li class="lotteryNumber"
                  :class="{'lotTerminal': _Format.formatCode($route.query.code).pk10, lotBjkl8: _Format.formatCode($route.query.code).happy8}"
                  v-if="!_Modulation.differentAwards($route.query.code).happy">
                {{lotChartsTitleData.award}}
              </li>
              <!--特码-->
              <li class="teamVal" v-if="_Format.formatCode($route.query.code).zodiac">
                <p v-for="lot in lotChartsTitleData.isCode">{{lot}}</p>
              </li>
              <li class="andTheVal" v-for="kjResultTItem in lotChartsTitleData.kjResultT"
                  v-if="isShowKjRes($route.query.code)">{{kjResultTItem}}
              </li>
              <li class="lotLsCode" v-for="lotNum in lotChartsTitleData.num">
                <p>{{lotNum.name}}</p>
                <p>
                  <span v-for="d in lotNum.data">{{d}}</span>
                </p>
              </li>
            </ul>
          </div>
          <div class="chartTabContent"
               :class="{scrollBar: _Format.formatCode($route.query.code).add || _Format.formatCode($route.query.code).shares}">
            <div class="chartTabContentBox relative">
              <div class="lotGDChartsCenter" v-if="eventTrue">
                <ul :class="{lotGDChartsLastItem:lIndex==(lotChartsCenterData.length-1)}"
                    v-for="(lotCenter,lIndex) in lotChartsCenterData">
                  <li>{{lotCenter.number}}</li>
                  <li class="lotteryNumber"
                      :class="{'lotTerminal': _Format.formatCode($route.query.code).pk10,lotBjkl8: _Format.formatCode($route.query.code).happy8}"
                      v-if="!_Modulation.differentAwards($route.query.code).happy">
                    <p v-for="l in lotCenter.data" :class="{red:localWave[parseInt(l)] === 'red'&&_Format.formatCode($route.query.code).bigWheel,black:localWave[parseInt(l)] === 'black'&&_Format.formatCode($route.query.code).bigWheel}">
                      {{l}}
                    </p>
                  </li>
                  <li class="teamVal" v-if="_Format.formatCode($route.query.code).zodiac">
                    <p v-for="l in lotCenter.data">
                      <span
                          :class="{'red': localWave[parseInt(l)] === 'red', 'green': localWave[parseInt(l)] === 'green', 'blue': localWave[parseInt(l)] === 'blue', 'gray': localWave[parseInt(l)] === 'gray'}">{{l}}</span>
                    </p>
                  </li>
                  
                  <li class="andTheVal" v-for="kjResultItem in initKjResult(lotCenter.kjResult)"
                      v-if="isShowKjRes($route.query.code)">
                    <p :class="{'red': localWave[kjResultItem] === 'red', 'green': localWave[kjResultItem] === 'green', 'blue': localWave[kjResultItem] === 'blue', 'gray': localWave[kjResultItem] === 'gray'}"
                       v-if="parseInt(kjResultItem)>0&&(_Format.formatCode($route.query.code).add)">
                      {{kjResultItem||'-'}}</p>
                    <span v-else>{{kjResultItem||'-'}}</span>
                  </li>
                  <!--号码走势区-->
                  <li class="lotLsCode" v-for="(lotNum,loIndex) in lotChartsTitleData.num">
                    <p v-for="d in lotNum.data"
                       :class="{
                      'on': ((parseInt(d) === parseInt(lotCenter.data[loIndex])) && !_Modulation.differentAwards($route.query.code).pcVery && !_Modulation.differentAwards($route.query.code).happy) ||
                      ((parseInt(d) === parseInt(_Util.sumNum(lotCenter.data))) && _Modulation.differentAwards($route.query.code).pcVery) ||
                      ((parseInt(d) === parseInt(lotCenter.data[lotCenter.data.length - 1])) && _Modulation.differentAwards($route.query.code).happy) , 'lotParTrue': missingTrue}">
                      <span>{{d}}</span>
                    </p>
                  </li>
                </ul>
              </div>
              <!--v-if="eventTrue"-->
              <canvas id="myCanvas" :class="{'myCanvasHidden': !brokenTrue}"
                      v-if="$route.query.code!='008'&&$route.query.code!='026'"></canvas>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import './lotteryCharts.scss';
  import lotteryMumColor from '../../theColor/color/data/lottery_num_color';
  
  export default {
    data() {
      return {
        lotChartsTitleData: [], //title 数据
        lotChartsGDData11: {}, //广东11选5
        //pc蛋蛋数据
        lotChartsCenterData: [],
        submitData: {
          lotteryCode: '007',
          pageNum: 1,
          pageSize: 50
        },
        lotteryTrue: {
          pcVery: false,
          lotGD: false,
          lotTerminal: false,
          happy: false,
        },
        missingTrue: false,
        brokenTrue: true,
        canvasWth: {
          W: 0,
          H: 0
        },
        eventTrue: true,
        lotteryChartsDataLen: 0,
        localWave: '', //本地色波
      }
    },
    activated() {
      this.titleInit();
      this.init();
    },
    mounted() {
      let that = this;
      that.titleInit();
      $(window).resize(function () {
        if (that._Format.formatCode(that.submitData.lotteryCode).happy8) return;
        $('.chartTabContent').scrollTop(0);
        that.spacingStepEvent(that.lotteryChartsDataLen);
      })
    },
    methods: {
      init() {
        let that = this;
        let thisCode = that.$route.query.code;
        if (that._Modulation.getLocalDataEvent(thisCode)) {
          that.localWave = lotteryMumColor[0][that._Modulation.getLocalDataEvent(thisCode)].color;
        }
        that.initData();
      },
      status() {
        let that = this;
        that.missingTrue = false;
        that.brokenTrue = true;
        that.eventTrue = false;
      },
      titleInit() {
        let that = this;
        that.status();
        let code = that.$route.query.code;
        that.submitData.lotteryCode = code;
        if (that._Format.chartCode(code).GD) {
          that.lotteryTrue.lotGD = true;
          that.lotChartsTitleData = {
            date: '期号',
            award: '开奖号码',
            kjResultT: ['总大小', '总单双', '上下盘', '奇偶', '总尾'],
            num: [
              {name: '正码一', data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]},
              {name: '正码二', data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]},
              {name: '正码三', data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]},
              {name: '正码四', data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]},
              {name: '正码五', data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]}
            ]
          };
        }
        if (that._Format.chartCode(code).K8) {
          that.lotteryTrue.lotGD = true;
          that.lotChartsTitleData = {
            date: '期号',
            award: '开奖号码',
            kjResultT: ['总和', '总和大小', '总和单双'],
          }
          // that.lotteryTrue.lotTerminal = true;
        }
        if (that._Format.chartCode(code).CQ) {
          that.lotteryTrue.lotGD = true;
          that.lotChartsTitleData = {
            date: '期号',
            award: '开奖号码',
            kjResultT: ['总和', '总和大小', '总和单双', '前三', '中三', '后三'],
            num: [
              {name: '万位', data: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]},
              {name: '千位', data: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]},
              {name: '百位', data: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]},
              {name: '十位', data: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]},
              {name: '个位', data: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]}
            ]
          };
        }
        if (that._Format.chartCode(code).BL) {
          that.lotteryTrue.lotGD = true;
          that.lotChartsTitleData = {
            date: '期号',
            award: '开奖号码',
            kjResultT: ['总和', '总和大小', '总和单双'],
            num: [
              {name: '第一张', data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13]},
              {name: '第二张', data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13]},
              {name: '第三张', data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13]},
              {name: '第四张', data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13]},
            ]
          };
        }
        if (that._Format.chartCode(code).BW) {
          that.lotteryTrue.lotGD = true;
          that.lotChartsTitleData = {
            date: '期号',
            award: '开奖号码',
            num: [
              {name: '和值', data: [0,1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36]},
            ]
          };
        }
        if (that._Format.chartCode(code).PK) {
          that.lotteryTrue.lotGD = true;
          that.lotChartsTitleData = {
            date: '期号',
            award: '开奖号码',
            num: [
              {name: '冠军', data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]},
              {name: '亚军', data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]},
              {name: '3', data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]},
              {name: '4', data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]},
              {name: '5', data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]},
              {name: '6', data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]},
              {name: '7', data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]},
              {name: '8', data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]},
              {name: '9', data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]},
              {name: '10', data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]}
            ]
          };
        }
        if (that._Format.chartCode(code).VC) {
          that.lotteryTrue.pcVery = true;
          that.lotChartsTitleData = {
            date: '期号',
            award: '开奖号码',
            kjResultT: ['和值', '大小', '单双', '波色'],
            num: [
              {
                name: "和值",
                data: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27]
              }
            ]
          };
        }
        if (that._Format.chartCode(code).K3) {
          that.lotteryTrue.lotGD = true;
          that.lotChartsTitleData = {
            date: '期号',
            award: '开奖号码',
            kjResultT: ['总和', '总和大小', '总和单双'],
            num: [
              {name: '第一球', data: [1, 2, 3, 4, 5, 6]},
              {name: '第二球', data: [1, 2, 3, 4, 5, 6]},
              {name: '第三球', data: [1, 2, 3, 4, 5, 6]},
            ]
          };
        }
        if (that._Format.chartCode(code).XG) {
          that.lotteryTrue.happy = true;
          that.lotChartsTitleData = {
            date: '期号',
            isCode: ['正码一', '正码二', '正码三', '正码四', '正码五', '正码六', '特码'],
            kjResultT: ['总分', '总分大小', '总分单双', '特码波色', '特码生肖'],
            num: [
              {
                name: '特码',
                data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49]
              }
            ]
          };
        }
        this.computTitleW(400);
      },
      //计算title宽度
      computTitleW(time) {
        let u = 0;
        let w = $(window).width();
        setTimeout(function () {
          let len = $('.lotGDChartsTitle ul li').length;
          $('.lotGDChartsTitle ul li').each(function (i, v) {
            u += $(this).outerWidth();
            if (u < w) {
//              return;
            } else {
              $('.lotGDDiv11').width(u + 26);
              // $('#myCanvas').width(u+15);
            }
            if (i == (len - 1) && u < w) {
              $('.lotGDDiv11').css({
                "width": 'auto',
              });
            }
          });
        }, time);
      },
      initData() {
        let that = this;
        that.submitData.lotteryCode = that.$route.query.code;
        that._Util.post(that, that._Api.POST_GET_HISTORY_DATA, that.submitData, (data) => {
          that.computTitleW(400);
          that.eventTrue = true;
          data.result.forEach((v, i) => {
            v.data = v.data.split(',');
            if (that._Format.formatCode(that.submitData.lotteryCode).zodiac) {
              v.animals = v.animals.split(',');
            }
          });
          that.lotChartsCenterData = data.result || [];
          if (that.lotChartsCenterData.length > 0) {
            that.$set(that.lotChartsTitleData, "kjResultT", JSON.parse(data.result[0].kjResult || '[[],[]]')[0],);
          }
          that.lotteryChartsDataLen = data.result.length;
          $('.lotChartsBack').css({
            "height": that._Util.lotteryWidthPx(160)
          });
          if (that._Format.formatCode(that.submitData.lotteryCode).shares) {
            $('#myCanvas').css({
              "left": -$(".lotGDDiv11").offset().left
            });
          }
          $('.lotHappyLH').css({
            "height": that._Util.lotteryWidthPx(160),
            "width": 'auto'
          });
          $('.chartTabContent').css({
            "height": that._Util.lotteryWidthPx((160 + $('.chartTabTitle').height()))
          });
          if (that._Format.formatCode(that.submitData.lotteryCode).happy8) return;
          that.spacingStepEvent(that.lotteryChartsDataLen);
        });
      },
      //初始化大小单双和值开奖结果
      initKjResult(result) {
        let resArr = JSON.parse(result || '[[],[]]');
        return resArr[1];
      },
      //是否显示开奖结果
      isShowKjRes(code) {
        if (this._Format.chartCode(code).PK) {
          return false;
        } else {
          return true;
        }
        
      },
      spacingStepEvent(len) {
        let that = this;
        setTimeout(function () {
          that.accessPoint(len);
        }, 500);
      },
      //获取点
      accessPoint(len) {
        let that = this;
        let $lotGDChartsCenter = $('.lotGDChartsCenter ul'),
          lenLot = $lotGDChartsCenter.eq(0).find('li.lotLsCode').length;
        // if(!that._Format.formatCode(that.submitData.lotteryCode).zodiac) {
        that.drawingTrend(len, lenLot);
        // }
      },
      //绘画走势图
      drawingTrend(len, lenLot) {
        let that = this;
        let myCanvas = document.getElementById('myCanvas');
        let myCanvasCtx = myCanvas.getContext("2d");
        if ($('.lotGDChartsTitle').width() > $(window).width()) {
          myCanvas.width = $('.lotGDChartsTitle').width();
        } else {
          myCanvas.width = $(window).width();
        }
        $('.lotChartsBack').css({
          "height": that._Util.lotteryWidthPx(160)
        });
        $('.lotHappyLH').css({
          "height": that._Util.lotteryWidthPx(160),
          "width": 'auto'
        });
        $('#myCanvas').css({
          "left": -$(".lotGDDiv11").offset().left
        });
        $('.chartTabContent').css({
          "height": that._Util.lotteryWidthPx((160 + $('.chartTabTitle').height()))
        });
        myCanvas.height = 30 * len + 60;
        let m = 0;
        for (var i = 0; i < lenLot; i++) {
          m = 0;
          let thisPositionLi = $('.lotGDChartsCenter ul').eq(0).find('.lotLsCode:eq(' + i + ')  p.on span');
          let _chartXY = thisPositionLi.offset();
          let u = 8;
          let t = 180;
          myCanvasCtx.moveTo(_chartXY.left + u, _chartXY.top - t);
          $('.lotGDChartsCenter ul').each(function () {
            let chartA = $(this).find('.lotLsCode:eq(' + i + ') p.on span');
            let chartXY = chartA.offset();
            if (chartXY) {
              myCanvasCtx.lineTo(chartXY.left + u, chartXY.top - t);
            }
          })
        }
        myCanvasCtx.lineWidth = 1;
        myCanvasCtx.strokeStyle = "#ff5151";
        myCanvasCtx.stroke();
      }
    },
    components: {},
    watch: {
      '$parent.lssId'() {
        let parentThis = 0;
        switch (parseInt(this.$parent.lssId)) {
          case 0:
            parentThis = 20;
            break;
          case 1:
            parentThis = 30;
            break;
          case 2:
            parentThis = 50;
            break;
          case 3:
            parentThis = 100;
            break;
        }
        $('.chartTabContent').animate({
          scrollTop: 0,
        }, 200);
        this.submitData.pageSize = parentThis;
        this.initData();
      },
      '$parent.selectTrue.vis'() {
        this.missingTrue = this.$parent.selectTrue.vis;
      },
      '$parent.selectTrue.broken'() {
        this.brokenTrue = this.$parent.selectTrue.broken;
      },
      '$route.query.code'() {
        this.titleInit();
        this.init();
        $('#myCanvas').css({
          "width": "auto"
        });
      }
    }
  }
</script>

<style scoped>
  body {
    overflow-x: scroll;
  }
</style>
